<template>
  <view class="container">
    <template v-if="place_name && city && all && image">
      <view class="item">
		<view class="item-image">
			<img :src="image" alt="" />
		</view>
        <view class="item-header">
          <text class="place-name">{{ place_name }}</text>
        </view>
        <view class="item-nav">
          <text class="nav-text">推荐导航：{{ city }}--{{ place_name }}</text>
        </view>
        <view class="item-detail">
          <text class="detail-text">详情：{{ all }}</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="no-data">暂无相关数据，请稍后重试。</view>
    </template>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; 

// 初始化接收的参数
const place_name = ref('');
const city = ref('');
const all = ref('');
const image = ref('');

// 使用 onLoad 生命周期函数接收参数
onLoad((options) => {
  console.log('接收到的参数:', options);
  // 对参数进行解码并赋值给相应的响应式变量
  place_name.value = options.place_name? decodeURIComponent(options.place_name) : '';
  city.value = options.city? decodeURIComponent(options.city) : '';
  all.value = options.all? decodeURIComponent(options.all) : '';
  image.value = options.image?decodeURIComponent(options.image):'';
  console.log('解码后的参数:', {
      place_name: place_name.value,
      city: city.value,
      all: all.value,
	  image:image.value
    });
});
</script>

<style scoped>
/* 整体容器样式 */
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 每个数据项样式 */
.item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
  transition: all 0.3s ease;
}

.item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

/* 地点名称样式 */
.item-header {
  margin-bottom: 10px;
}

.place-name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 导航信息样式 */
.item-nav {
  margin-bottom: 15px;
}

.nav-text {
  font-size: 16px;
  color: #666;
}

/* 详情信息样式 */
.item-detail {
  line-height: 1.6;
}

.detail-text {
  font-size: 14px;
  color: #999;
}

/* 无数据提示样式 */
.no-data {
  font-size: 18px;
  color: #999;
  text-align: center;
  padding: 20px;
}

/* 新增：信息项样式 */
.item-info {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
}
</style>